iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
Modern Web

Angular - 從零開始系列 第 22

Angular - 從零開始 - Day22 - Pipe 管線元件:date

  • 分享至 

  • xImage
  •  

angular

根據區域設定規則格式化日期值,在 JS 原本寫日期有點瑣碎,但透過這個 datePipe 讓日期變得更簡單,而且還可以無痛轉換地區,真是太棒了。

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
  • date:JS 的 Date 物件。
  • format:要包含的日期、時間部分的格式,預設值是 mediumDate
  • timezone:預設為本地端的時間,也就是如果我在台灣就是顯示台灣時間,加上 '+0430' 代碼,會在格林威治標準時間加上 4 小時 30 分。
  • locale:當地格式。

其他預設值:

  • short: 等價於 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
  • medium: 等價於 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
  • long: 等價於 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1)
  • full: 等價於 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at
  • 9:03:01 AM GMT+01:00)
  • 'shortDate': 等價於 'M/d/yy' (6/15/15).
  • mediumDate: 等價於 'MMM d, y' (Jun 15, 2015).
  • longDate: 等價於 'MMMM d, y' (June 15, 2015).
  • fullDate: 等價於 'EEEE, MMMM d, y' (Monday, June 15, 2015).
  • shortTime: 等價於 'h:mm a' (9:03 AM).
  • mediumTime: 等價於 'h:mm:ss a' (9:03:01 AM).
  • longTime: 等價於 'h:mm:ss a z' (9:03:01 AM GMT+1).
  • fullTime: 等價於 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

HTML

<div>
  <p>Today is {{today | date}}</p>
  <p>Or if you prefer, {{today | date:'fullDate'}}</p>
  <p>The time is {{today | date:'h:mm a z'}}</p>
</div>

TS

today = Date.now();

Demo


上一篇
Angular - 從零開始 - Day21- Pipe 管線元件:percent
下一篇
Angular - 從零開始 - Day23 - 表單驗證:Template Driven Form
系列文
Angular - 從零開始25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言